<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <!-- localStorage也是一种浏览器存储数据的方式,它是存储在本地,不会发送到服务器端 -->
    <form action="https://www.imooc.com" method="post" id="login">
        <input type="text" name="username" />
        <input type="password" name="password" />
        <input type="submit" id="btn" value="登录" />
    </form>
    <script type="module">
        import { get, set, remove, clear } from "./storage.js";
    </script>
    <script>
        // 设置localStorage
        // localStorage.setItem("username", "weixing");
        // 获取localStorage,获取不存在的返回null
        // localStorage.getItem("username");
        // 删除不存在的key,不报错
        // localStorage.removeItem("name");
        // clear()一键清除所有
        // localStorage.clear();
        // console.log(localStorage);
        // 自动填充功能实现
        const loginForm = document.getElementById("login");
        const btn = document.getElementById("btn");
        const username = localStorage.getItem("username");
        if (username) {
            loginForm.username.value = username;
        }
        btn.addEventListener(
            "click",
            (e) => {
                e.preventDefault();
                // 数据校验
                console.log(loginForm.username.value);
                localStorage.setItem("username", loginForm.username.value);
                loginForm.submit();
            },
            false
        );

        // localStorage注意事项
        // 1.localStorage的存储期限:localStorage是持久化本地存储的,除非手动清除,否则永远不会过期
        // sessionStorage
        // 当会话结束(比如浏览器关闭),数据会被清空,使用方法和localStorage相同
        // 2.localStorage是键值的类型
        // 存储的键和值只能是字符串,如果不是字符串,会先将其转化成字符串,然后再存入
        // 3.不同域名下不能共用localStorage
    </script>
</body>

</html>